{% extends "base.html" %}
{% load i18n %}
{% block style %}
    <link rel="stylesheet" type="text/css" href="/assets/css/colorbox.css"/>
{% endblock %}
{% block title %}
    <title>案例详情</title>
{% endblock %}
<body>
{% block detail %}
    <div class="main clearfix">
        <div class="mPart">
            <div class="article">
                <h2>{{ case.name }}</h2>

                <p class="info">
                    {% if favorite %}
                        <a class="share bg2">{% trans 'Saved' %}</a>
                    {% else %}
                        <a href="javascript:addfavorite();" class="share">{% trans 'Save' %}</a>
                    {% endif %}
                    <span>{% trans 'Case No.:' %}{{ case.id }}</span><span>{% if case.author %}{% trans 'Author:' %}
                    {{ case.author }}{% endif %}</span>
                    <span>{{ case.date|timesince }}</span><br>
                    {% ifequal LANGUAGE_CODE 'en' %}
                        <em>{{ case.ownership.name }}</em><i>/</i><em>{{ case.company_scale.name }}</em><i>/</i>
                        <em>{{ case.industry.name }}</em><i>/</i><em>{{ case.department.name }}</em>
                    {% else %}
                        <em>{{ case.ownership.name_cn }}</em><i>/</i><em>{{ case.company_scale.name_cn }}</em><i>/</i>
                        <em>{{ case.industry.name_cn }}</em><i>/</i><em>{{ case.department.name_cn }}</em>
                    {% endifequal %}
                </p>

                <p class="brief"><em>{{ case.brief }}</em></p>

                <div class="article_con">
                    {% if case.img %}
                        <img src="/file/{{ case.img }}-640x480"/>
                    {% endif %}
                    {{ case.description|safe }}
                </div>
                {% if keywords %}
                    <div class="tag">
                        {% for k in keywords %}
                            <span>{{ k }}</span>
                        {% endfor %}
                    </div>
                {% endif %}
                {% if video %}
                    <div class="leftLoop">
                        <div class="hd">
                            <a class="next"></a>
                            <ul></ul>
                            <a class="prev"></a>
                        </div>
                        <div class="bd">
                            <ul class="picList">
                                {% for v in video %}
                                    <li>
                                        <div class="pic"><a href="###"
                                                            onclick="play('{{ v.link }}','{{ v.type }}');"
                                                            class="vedioPlay"><img
                                                src="{{ v.img }}" alt="{{ v.name }}" title="{{ v.name }}"/></a></div>
                                        <h3>{{ v.name }}</h3>

                                        <div class="tool"><a href="/file/{{ v.link }}"
                                                             target="_blank">{% trans 'Download' %}</a><a href="###"
                                                                                                          onclick="play('{{ v.link }}','{{ v.type }}');"
                                                                                                          class="vedioPlay">{% trans 'View' %}</a>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="ask-l">
                <div class="btn"><span>{% trans 'Learning list' %}：</span><input type="button"
                                                                                 value="{% trans 'Start to learn' %}"
                                                                                 onclick="showAnsDiv();"></div>
                <div class="m">
                    {% if s %}
                        {% for u in s %}
                            <a href="javascript:void(0)"
                               class="ask-detail"
                               title="{{ u.userprofile.company }}"
                               onclick="showUserAnswer('{{ u.id }}')">{{ u.userprofile.company }}</a>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="sPart">
            <h2 class="h2_tlt">{% trans 'Problem List' %}</h2>
            <ul class="sim_list">
                {% for sa in sa %}
                    {% ifequal LANGUAGE_CODE 'en' %}
                        <li><a href="javascript:answerQ('{{ forloop.counter }}');"
                                {% if sa.content %} class="a" {% endif %}>{{ sa.question.content }}</a>
                        </li>
                    {% else %}
                        <li>
                            <a href="javascript:answerQ('{{ forloop.counter }}');"
                                    {% if sa.content %} class="a" {% endif %}>{{ sa.question.content_cn }}</a>
                        </li>
                    {% endifequal %}
                {% endfor %}
            </ul>
        </div>
        <div class="push"></div>
    </div>
    <div style="width:300px; height:200px;display: none;" id="myplay"></div>
    <input type="hidden" id="caseId" value="{{ case.id }}">
{% endblock %}
{% block other %}
    <!--回答问题编辑框-->
    <div class="comment" style="display: none;">
        <div class="editCom">
            {% for sa in sa %}
                <div id="a_{{ forloop.counter }}" class="edit-m" style="display: none;">
                    {% ifequal LANGUAGE_CODE 'en' %}
                        <h2>{{ forloop.counter }}、{{ sa.question.content }}</h2><br/>
                    {% else %}
                        <h2>{{ forloop.counter }}、{{ sa.question.content_cn }}</h2><br/>
                    {% endifequal %}
                    {% if sa.id %}
                        <div class="txt_area">
                            <textarea id="au_{{ sa.id }}">{{ sa.content }}</textarea>
                        </div>
                        <div class="btn">
                            {% if forloop.first %}
                            {% else %}
                                <input type="button" value="{% trans 'Prev' %}"
                                       onclick="prevQuestion('{{ forloop.counter }}','{{ question_size }}');"/>
                            {% endif %}
                            {% if forloop.last %}
                                <input type="button" value="{% trans 'Save & Exit' %}"
                                       onclick="saveAnswer('{{ sa.id }}',1,'{{ forloop.counter }}','{{ question_size }}');"/>
                                {% else %}<input type="button" value="{% trans 'Next' %}"
                                                 onclick="saveAnswer('{{ sa.id }}',1,'{{ forloop.counter }}','{{ question_size }}');"/>{% endif %}
                        </div>
                    {% else %}
                        <div class="txt_area">
                            <textarea id="a_{{ sa.question.id }}">{{ sa.content }}</textarea>
                        </div>
                        <div class="btn">
                            {% if forloop.first %}
                            {% else %}
                                <input type="button" value="{% trans 'Prev' %}"
                                       onclick="prevQuestion('{{ forloop.counter }}','{{ question_size }}');"/>
                            {% endif %}
                            {% if forloop.last %}
                                <input type="button" value="{% trans 'Save & Exit' %}"
                                       onclick="saveAnswer('{{ sa.question.id }}',2,'{{ forloop.counter }}','{{ question_size }}');"/>
                                {% else %}<input type="button" value="{% trans 'Next' %}"
                                                 onclick="saveAnswer('{{ sa.question.id }}',2,'{{ forloop.counter }}','{{ question_size }}');"/>{% endif %}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <a href="###" class="close" onclick="hideAnsDiv();">X</a>
    </div>
    <!--回答问题编辑框-->

    <div style="display:none;" id="askdetail">
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript" src="/assets/js/jwplayer/jwplayer.js"></script>
    <script src="/assets/js/jquery.SuperSlide.js" type="text/javascript"></script>
    <script src="/assets/js/jquery.colorbox-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#myplay_wrapper").hide();
            $("#myplay").hide();
        });
        //保存答题内容
        function saveAnswer(id, type, index, max) {
            var param;
            if (type == 1) {
                param = {
                    'type': type,
                    'answerId': id,
                    'content': $("#au_" + id).val()
                }
                $("#a_" + index).hide();
                if (parseInt(index) < parseInt(max)) {
                    $(".coment").show();
                    $("#a_" + (parseInt(index) + 1)).show();
                }
                else {
                    $("#a_" + max).hide();
                }
            } else if (type == 2) {
                param = {
                    'type': type,
                    'questionId': id,
                    'content': $("#a_" + id).val()
                }
                $("#a_" + index).hide();
                if (parseInt(index) < parseInt(max)) {
                    $(".comment").show();
                    $("#a_" + (parseInt(index) + 1)).show();
                }
                else {
                    $("#a_" + max).hide();
                }
            }

            $.ajax({
                url: '/saveAnswer/{{ case.id }}',
                data: param,
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    if (parseInt(index) == parseInt(max))
                        window.location.reload();
                }
            })
        }
        //上一题
        function prevQuestion(index, max) {
            $(".comment").show();
            if (index < max) {
                $("#a_" + (parseInt(index) - 1)).show();
                $("#a_" + (parseInt(index))).hide();
            }
        }
        //展示回答问题div
        function showAnsDiv() {
            $(".edit-m").hide();
            $(".edit-m:eq(0)").show();
            $(".comment").show();
        }
        function hideAnsDiv() {
            $(".comment").hide();
        }
        function answerQ(index) {
            $(".edit-m").hide();
            $(".comment").show();
            $(".edit-m:eq(" + (index - 1) + ")").show();
        }
        function play(url, type) {
            if (type == "MP4" || type == "FLV") {
                thePlayer = jwplayer("myplay").setup({
                    flashplayer: "/assets/js/jwplayer/player.swf",
                    autostart: true,
                    type: "http",
                    file: url,
                    height: 434,
                    width: 652
                });
                $(".vedioPlay").colorbox({inline: true, href: '#myplay', innerWidth: '652px', innerHeight: '434px'});
                $("#myplay").show();
                //jwplayer().play();
                return false;
            } else {
                alert("Not a video file");
                //$.colorbox.close();
                $(".vedioPlay").removeClass("cboxElement").removeData("colorbox");
                return false;
            }
        }
        function showUserAnswer(id) {
            $.ajax({
                url: '/showUserAnswer/{{ case.id }}/',
                data: {'userId': id},
                dataType: 'html',
                success: function (data) {
                    $("#askdetail").empty().html(data);
                    $.colorbox({width: "45%", inline: true, href: "#inline_askDetail", open: true});
                }
            })
        }
        function addfavorite() {
            var caseId = $("#caseId").val();
            $.ajax({
                url: '/my/favor/add/',
                type: 'get',
                data: "caseId=" + caseId,
                dataType: 'text',
                success: function (data) {
                    alert(data);
                    $(".share").addClass("bg2").html("已收藏").removeAttr("href");
                }
            })
        }
    </script>
    <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script>
    <script src="/assets/js/TopDiv.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = window.onscroll = scrollTop;
    </script>
    <script type="text/javascript">
        jQuery(".leftLoop").slide({ mainCell: ".bd ul", titCell: ".hd ul", effect: "left", vis: 4, scroll: 4, autoPlay: true, autoPage: true});
    </script>
{% endblock %}
</body>